<template>
  <div class="test-import">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Excel导入功能测试</span>
        </div>
      </template>
      
      <div class="test-sections">
        <!-- 模板下载测试 -->
        <div class="test-section">
          <h3>1. 模板下载测试</h3>
          <el-button type="primary" @click="testTemplateDownload">
            下载导入模板
          </el-button>
        </div>
        
        <!-- 数据验证测试 -->
        <div class="test-section">
          <h3>2. 数据验证测试</h3>
          <el-button type="success" @click="testDataValidation">
            测试数据验证
          </el-button>
        </div>
        
        <!-- 文件读取测试 -->
        <div class="test-section">
          <h3>3. 文件读取测试</h3>
          <el-upload
            :auto-upload="false"
            :on-change="handleTestFile"
            :limit="1"
            accept=".xlsx,.xls"
          >
            <el-button type="info">选择测试文件</el-button>
          </el-upload>
        </div>
      </div>
      
      <!-- 测试结果显示 -->
      <div class="test-results" v-if="testResult">
        <el-alert
          :title="testResult.title"
          :type="testResult.type"
          :description="testResult.description"
          show-icon
          :closable="false"
        />
        
        <!-- 验证错误详情 -->
        <div v-if="testResult.errors && testResult.errors.length > 0" class="error-details">
          <h4>验证错误详情：</h4>
          <ul>
            <li v-for="(error, index) in testResult.errors" :key="index">{{ error }}</li>
          </ul>
        </div>
        
        <!-- 预览数据 -->
        <div v-if="testResult.previewData && testResult.previewData.length > 0" class="preview-data">
          <h4>预览数据：</h4>
          <el-table :data="testResult.previewData" max-height="300" stripe border>
            <el-table-column prop="学号" label="学号" width="120" />
            <el-table-column prop="姓名" label="姓名" width="100" />
            <el-table-column prop="性别" label="性别" width="80" />
            <el-table-column prop="专业" label="专业" width="150" />
            <el-table-column prop="班级" label="班级" width="120" />
            <el-table-column prop="年级" label="年级" width="80" />
            <el-table-column prop="联系电话" label="联系电话" width="130" />
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  downloadImportTemplate, 
  generateImportTemplate, 
  validateExcelData, 
  readExcelFile, 
  previewExcelData 
} from '@/utils/excel'

const testResult = ref<{
  title: string
  type: 'success' | 'error' | 'warning' | 'info'
  description: string
  errors?: string[]
  previewData?: any[]
} | null>(null)

const showResult = (
  title: string, 
  type: 'success' | 'error' | 'warning' | 'info', 
  description: string,
  errors?: string[],
  previewData?: any[]
) => {
  testResult.value = { title, type, description, errors, previewData }
  setTimeout(() => {
    testResult.value = null
  }, 10000)
}

const testTemplateDownload = () => {
  try {
    downloadImportTemplate()
    showResult(
      '模板下载测试成功', 
      'success', 
      '导入模板已成功下载，包含示例数据和正确的列格式'
    )
  } catch (error) {
    showResult(
      '模板下载测试失败', 
      'error', 
      (error as Error).message
    )
  }
}

const testDataValidation = () => {
  try {
    // 生成测试数据
    const testData = generateImportTemplate()
    
    // 添加一些错误数据用于测试验证
    const invalidData = [
      ...testData,
      {
        '学号': '123', // 学号格式错误
        '姓名': '', // 姓名为空
        '性别': '未知', // 性别错误
        '出生日期': '2000-01-01',
        '身份证号': '123456', // 身份证号格式错误
        '专业': '计算机科学与技术',
        '班级': '计科2101',
        '年级': 'abc', // 年级格式错误
        '入学日期': '2021-09-01',
        '联系电话': '123', // 电话格式错误
        '邮箱': 'invalid-email', // 邮箱格式错误
        '地址': '北京市朝阳区'
      }
    ]
    
    // 验证数据
    const requiredFields = ['学号', '姓名', '性别', '身份证号', '专业', '班级', '年级']
    const validation = validateExcelData(invalidData, requiredFields)
    
    if (validation.valid) {
      showResult(
        '数据验证测试', 
        'warning', 
        '验证通过，但测试数据包含错误，这可能表示验证逻辑有问题'
      )
    } else {
      showResult(
        '数据验证测试', 
        'info', 
        `验证失败，共发现 ${validation.errors.length} 个错误`,
        validation.errors
      )
    }
  } catch (error) {
    showResult(
      '数据验证测试失败', 
      'error', 
      (error as Error).message
    )
  }
}

const handleTestFile = async (file: any) => {
  try {
    // 读取Excel文件
    const data = await readExcelFile(file.raw)
    
    if (!data || data.length === 0) {
      showResult(
        '文件读取测试失败', 
        'error', 
        'Excel文件为空或无法读取'
      )
      return
    }
    
    // 验证数据
    const requiredFields = ['学号', '姓名', '性别', '身份证号', '专业', '班级', '年级']
    const validation = validateExcelData(data, requiredFields)
    
    // 预览数据
    const { preview } = previewExcelData(data, 5)
    
    if (validation.valid) {
      showResult(
        '文件读取测试成功', 
        'success', 
        `文件解析成功，共 ${data.length} 条数据，预览前 5 条`,
        undefined,
        preview
      )
    } else {
      showResult(
        '文件读取测试', 
        'warning', 
        `文件解析成功，共 ${data.length} 条数据，但发现 ${validation.errors.length} 个验证错误`,
        validation.errors,
        preview
      )
    }
  } catch (error) {
    showResult(
      '文件读取测试失败', 
      'error', 
      (error as Error).message
    )
  }
}
</script>

<style scoped>
.test-import {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.test-section {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.test-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.test-results {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.error-details {
  margin-top: 15px;
  padding: 15px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
}

.error-details h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #f56c6c;
}

.error-details ul {
  margin: 0;
  padding-left: 20px;
  color: #f56c6c;
}

.preview-data {
  margin-top: 15px;
  padding: 15px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
}

.preview-data h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #409eff;
}
</style>
